import React, { useState, useEffect } from 'react';
import { NavBar, SearchBar, Tag, Ellipsis } from 'antd-mobile';
import './index.less';
import { DeleteOutline, DownFill } from 'antd-mobile-icons';
import { history, request } from 'umi';
import { getRenderPropValue } from 'antd/es/_util/getRenderPropValue';
export default function index() {
  const [tagList, settagList] = useState([]);
  const [taglist, settaglist] = useState([]);
  const [hotTaglist, sethotTaglist] = useState([]);
  const [isShow, setisShow] = useState(false);
  const [value, setvalue] = useState('');
  function back() {
    history.goBack();
  }
  async function show() {
    let data = await request('/api/search/record');
    console.log(data);
    if (data.code == 200) {
      if (data.data.length >= 7) {
        setisShow(true);
        settagList(data.data.reverse().slice(0, 7));
        settaglist(data.data);
      } else {
        settagList(data.data);
      }
      sethotTaglist(
        data.data
          .sort((a, b) => (a.num < b.num ? 1 : a.num > b.num ? -1 : 0))
          .slice(0, 6),
      );
    }
  }
  useEffect(() => {
    show();
  }, []);
  async function delAll() {
    let data = await request('/api/search/delAll', { method: 'DELETE' });
    if (data.code == 200) {
      show();
    }
  }
  function change(value) {
    setvalue(value);
  }

  async function search(values) {
    console.log(values, 'values');
    let data = await request('/api/search/add/' + values, { method: 'PUT' });
    history.push({ pathname: '/Cgoods', state: values });
    if (data.code == 200) {
      show();
    }
  }
  return (
    <div className="search">
      <div className="searcTop">
        <NavBar onBack={back}>
          <SearchBar
            placeholder="请输入内容"
            style={{
              '--border-radius': '100px',
              '--background': 'rgb(248, 248, 248)',
              '--height': '32px',
              '--padding-left': '12px',
              white: '160px',
            }}
            onChange={(value) => change(value)}
            onSearch={(value) => search(value)}
          />
        </NavBar>
      </div>
      <div className="record">
        {tagList.length != 0 ? (
          <>
            <div className="recordTop">
              <span>历史搜索</span>
              <span>
                <DeleteOutline onClick={delAll} />
              </span>
            </div>
            <div className="recordTag">
              {tagList.map((item, index) => {
                return (
                  <Tag
                    round
                    color="#2db7f5"
                    key={item._id}
                    onClick={() => {
                      search(item.name);
                    }}
                  >
                    {item.name}
                  </Tag>
                );
              })}
              {isShow ? (
                <Tag
                  onClick={() => {
                    setisShow(false);
                    settagList(taglist);
                  }}
                >
                  展开
                  <DownFill />
                </Tag>
              ) : (
                ''
              )}
            </div>
          </>
        ) : (
          ''
        )}
      </div>

      <div className="record">
        <div className="recordTop">
          <span>热门搜索</span>
        </div>
        <div className="recordUl">
          <ul>
            {hotTaglist.map((item1, index) => {
              return (
                <li
                  key={index}
                  onClick={() => {
                    search(item1.name);
                  }}
                >
                  <div>{index + 1}</div>
                  {item1.name}
                </li>
              );
            })}
          </ul>
        </div>
      </div>
    </div>
  );
}
